import { useCallback } from 'react';
import { View } from '@tarojs/components';
import { useSelector } from 'react-redux';
import { TJobListItem } from '../../../types';
import { EStatus } from '../../../utils';
import TopIcon, { EIcon, StatusIconTypeArray } from '../../../components/top-icon/index.weapp';
import { TStateType } from '../../../redux/reducers';

import './index.scss';

interface IStatusCardProps {
  status: EStatus;
  lable: string;
  backgroundColor: string;
}

export const StatusCard = (props: IStatusCardProps) => {
  const { status, lable, backgroundColor } = props;
  const originData: TJobListItem[] = useSelector((state: TStateType) => state.jobList);

  const statusCount = useCallback(
    (item: EStatus) => originData.reduce((pre, cur) => pre + (cur.status === item ? 1 : 0), 0),
    [originData]
  );

  return (
    <View className='status-card-container' style={{ backgroundColor }}>
      <View className='status-icon'>
        <TopIcon type={EIcon.StatusIcon} name={StatusIconTypeArray[status]} size={40} />
      </View>
      <View className='detial-container'>
        <View className='detial-lable'>{lable}</View>
        <View className='detial-count'>{statusCount(status)}</View>
      </View>
    </View>
  );
};
